<template>
  <div style="padding: 20px;">
    <div class="lamp-box">
      <!--  灯具控制员 开启/关闭 -->
      <template v-if="userInfo.role == 1">
        <div class="item" v-for="(item,idx) in lampMenu2" :class="{'on': currIdx == idx}"
             @click="changeLamp(item,idx)">
          {{ isLamp ? item.name : item.nameAll }}
        </div>
      </template>
      <!--  灯具维修员 开启/关闭/维修  映射 -->
      <template v-if="userInfo.role == 2">
        <div class="item" v-for="(item,idx) in lampMenu" :class="{'on': currIdx == idx}"
             @click="changeLamp(item,idx)">
          <template v-if="idx == 2">
            <template v-if="currLamp.lightType == 4">灯具正常</template>
            <template v-if="currLamp.lightType == 1">灯具维修</template>
          </template>
          <template v-else>
            {{item.name}}
          </template>
        </div>
      </template>
    </div>

    <div class="sel" v-if="isLamp && userInfo.role == 2">
      <el-checkbox v-model="isCheck" @change="changeLight" />
      <div class="sel-light" v-if="isCheck">
        <div class="txt"><i class="iconfont icon-edit"></i>请选择映射开关：</div>
        <el-select v-model="switchVal"
                   placeholder="请选择">
          <el-option :label="item.lightname" :value="item.lightname" v-for="item in mappingData"/>
        </el-select>

<!--        <select @change="changeMapping" style="width: 220px; height: 36px">
          <option value="">请选择</option>
          <option :value="item.lightname" v-for="item in mappingData">{{item.lightname}}</option>
        </select>-->

      </div>
      <div v-else class="txt">映射开关：{{ currLamp.lightname }}</div>
    </div>

    <div style="display: flex; justify-content: flex-end; margin-top: 40px">
      <div @click="submitForm" class="sure-btn" style="margin-right: 10px">确认</div>
      <div @click="cancelHandle" class="cancel-btn">取消</div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import img1 from "../../assets/images/img-icon25.svg";
import img2 from "../../assets/images/img-icon26.svg";
import img3 from "../../assets/images/img-icon27.svg";
import {sendCommandLightMsg, UpdateLightFact, updateLightType} from "../../router/api.js";

export default {
  name: "editLampNew",
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      isLamp: true,
      lampMenu: [
        {name: '灯具开启', nameAll: '灯具全开启', value: 1, url: img1},
        {name: '灯具关闭', nameAll: '灯具全关闭', value: 2, url: img2},
        {name: '灯具维修', nameAll: '灯具全维修', value: 3, url: img3}
      ],
      lampMenu2: [
        {name: '灯具开启', nameAll: '灯具全开启', value: 1, url: img1},
        {name: '灯具关闭', nameAll: '灯具全关闭', value: 2, url: img2},
      ],
      switchVal: '',
      currIdx: -1,
      currItem: {},
      isCheck: false,
    }
  },
  props: {
    mappingData: {
      type: Array,
      default() {
        return []
      }
    },
    currLamp: {
      type: Object,
      default() {
        return {}
      }
    },
    currMenuLampItem: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  methods: {
    changeLight(val){
      if(val){
        this.currIdx = -1;
      }
    },
    changeLamp(item, idx) {
      this.isCheck = false;
      this.currIdx = idx;
    },
    submitForm() {
      let gatewayName = '', topic = '';
      if(this.currMenuLampItem.towername){
          //灯塔
          gatewayName = this.currMenuLampItem.gatewaylist.gatewayName;
          topic = this.currMenuLampItem.gatewaylist.subTopic;
      }else{
          //灯桥
          let v = this.currMenuLampItem.gatewaylist.find(opt => opt.gatewayId == this.currLamp.gatewayId)
          gatewayName = v.gatewayName;
          topic = v.subTopic
      }

      let lamp = this.currLamp.lightnameFact;
      if (this.isCheck) {
        //灯具映射
        UpdateLightFact({
          gatewayName,
          topic,
          lightNameFact: lamp,
          oldLightName: this.currLamp.lightname,
          newLightName: this.switchVal,
        }).then(res => {
          this.successHandle(res)
        })
      } else {
        //灯具开启/关闭/维修
        this.lampStatusHandle({gatewayName, topic, lamp})
      }
    },
    lampStatusHandle({gatewayName, topic, lamp, o}) {
      if (this.currIdx == 2) {
        //灯类型的修改
        updateLightType({
          CCID: this.currLamp.ccid,
          topic,
          lightnameFact: lamp,
          newLightType: this.currLamp.lightType == 1 ? 4 : 1
        }).then(res => {
          this.successHandle(res)
        })
      } else {
        //灯具开启关闭
        let action = this.currIdx == 1 ? 0 : 1;
        let commandMegStr = {};
        commandMegStr[lamp] = action;

        sendCommandLightMsg({
          gatewayName,
          topic,
          lamp,
          action,
          commandMegStr
        }).then(res => {
          this.successHandle(res)
        })
      }
    },
    successHandle(res) {
      if (res.data.code == 200) {
        this.currIdx = -1;
        this.switchVal = ''
        // this.$message.success(res.data.msg);
        this.$emit('saveOk');
      } else {
        // this.$message.warning(res.data.msg);
      }
    },
    cancelHandle() {
      this.currIdx = -1;
      this.switchVal = '';
      this.isCheck = false;

      this.$emit('closeHandle')
    },
  }
}
</script>

<style scoped lang="scss">
.lamp-box {
  display: flex;
  justify-content: center;
  margin-top: 30px;

  .item {
    height: 42px;
    line-height: 42px;
    background: #E1E5EA;
    border: 1px solid #CED4D7;
    font-size: 18px;
    font-weight: 400;
    color: #336666;
    margin-right: 10px;
    padding: 0 16px;
    border-radius: 4px;
    cursor: pointer;

    &.on, &:hover {
      background: #3CBCFF;
      border-color: #3CBCFF;
      color: #fff;
    }

    &:nth-child(1), &:nth-child(2), &:nth-child(3) {
      &:before {
        content: '';
        width: 17px;
        height: 17px;
        display: inline-block;
        margin-right: 6px;
        vertical-align: middle;
      }
    }

    &:nth-child(1) {
      &:before {
        background: url("@/assets/images/img-icon25.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      &:hover, &.on {
        &:before {
          background: url("@/assets/images/img-icon29.svg") no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }

    &:nth-child(2) {
      &:before {
        background: url("@/assets/images/img-icon26.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      &:hover, &.on {
        &:before {
          background: url("@/assets/images/img-icon28.svg") no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }

    &:nth-child(3) {
      margin-right: 0;

      &:before {
        background: url("@/assets/images/img-icon27.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      &:hover, &.on {
        &:before {
          background: url("@/assets/images/img-icon30.svg") no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
  }

}

.sel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 30px;

  .sel-light{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .txt {
    margin-left: 10px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;

    .iconfont {
      color: #3CBDFF;
      margin-right: 6px;
    }
  }

  :deep(.el-select) {
    width: 220px;
  }
}
.cancel-btn{
  color: #fff;
}
</style>
<style lang="scss">
.edit-lamp {
  .el-dialog__header {
    background: url("@/assets/images/img-title-b.png") no-repeat left top !important;
    background-size: 100% 100% !important;
  }
}
</style>
